/**
 * 确定座位
 * @email 626097912@qq.com
 * Created by dength on 2017/04/19
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    ScrollView,
    Platform
} from 'react-native';
import BaseComponent from '../base/baseComponent';
import Constants from '../base/constants';
import CommonStyles from '../base/commonStyles';
import Icon from 'react-native-vector-icons/Entypo';
import { getNavigator } from '../route/route';
import Esoterica from './customWindow/esoterica';
import TrainTimetable from './customWindow/trainTimetable';

const Navigation_HEIGHT = (Platform.OS === 'ios' ? 64 : 50)


class FixedSeat extends BaseComponent {
    constructor(props) {
        super(props);
        this.state = {
            showEsoterica: false,
            showTrainTimetable: false,
        }
    }

    getNavigationBarProps() {
        return {
            title: '确定座位',
            leftButtonImage: require('../images/ic_return.png'),
            hideRightButton: true,
        };
    }

    _onPress(navname) {
        getNavigator().push({ name: navname });
    }

    /**
      * 事件：抢票秘笈弹出
      */
    onOpenEsoterica() {
        this.setState({
            showEsoterica: true
        });
    }

    /**
     * 事件：抢票秘笈关闭
     */
    onCloseEsoterica() {
        this.setState({
            showEsoterica: false
        });
    }

    /**
         * 列车时刻表
         */
    onOpenTrainTimetable() {
        this.setState({
            showTrainTimetable: true
        });
    }

    onCloseTrainTimetable() {
        this.setState({
            showTrainTimetable: false
        });
    }

    renderBody() {
        let { showEsoterica, showTrainTimetable} = this.state;
        return (
            <View style={styles.container}>
                <Image style={styles.top_img} source={require('../images/ic_fixedSeat_t.png')}>
                    <View style={styles.top_img_view}>

                        <View style={styles.sitebox}>
                            <Text style={styles.sitebox_text}>长沙南</Text>
                        </View>
                        <View style={[styles.sitebox_lf_top, { top: -20, left: 0, }]}>
                            <Text style={styles.sitebox_lf_top_tx}>10:21</Text>
                        </View>
                        <View style={[styles.sitebox_lf_top, { bottom: -20, left: 0, }]}>
                            <Text style={styles.sitebox_lf_top_tx}>03月10日</Text>
                        </View>

                        <View style={styles.top_img_view_li}>
                            <View style={styles.top_img_view_li_xian}></View>
                            <View style={[styles.top_img_view_p, { top: -6, }]}>
                                <Text style={styles.top_img_view_p_tx}>G77</Text>
                            </View>
                            <TouchableOpacity
                                activeOpacity={0.8}
                                onPress={this.onOpenTrainTimetable.bind(this)}
                                style={[styles.top_img_view_p, { bottom: -6, }]}>
                                <Text style={styles.top_img_view_p_tx}>时刻表</Text>
                            </TouchableOpacity>
                        </View>

                        <View style={styles.sitebox}>
                            <Text style={styles.sitebox_text}>深圳北</Text>
                        </View>
                        <View style={[styles.sitebox_lf_top, { top: -20, right: 0 }]}>
                            <Text style={styles.sitebox_lf_top_tx}>19:21</Text>
                        </View>
                        <View style={{ bottom: -20, right: 0, width: 90, position: 'absolute', alignItems: 'center' }}>
                            <Text style={[styles.sitebox_lf_top_tx, { flexDirection: 'row' }]}>二等座:
                                <Text>￥388.5</Text>
                            </Text>
                        </View>

                    </View>
                </Image>

                <View>
                    <View style={styles.dateselection}>
                        <View style={[styles.dateselection_box, styles.dateselection_xian]}>
                            <TouchableOpacity
                                activeOpacity={0.8}
                                style={styles.dateselection_lr}
                                >
                                <Icon name="chevron-small-left" size={26} color="#EB6519" />
                            </TouchableOpacity>
                            <View style={styles.dateselection_ce}>
                                <Image style={styles.dateselection_ce_img} source={require('../images/ic_fixedSeat_c.png')} />
                                <Text style={styles.dateselection_ce_tx}>3月9日</Text>
                                <Text style={{ color: '#EB6519', fontSize: 14 }}>
                                    星期四(
                                <Text>今天</Text>
                                    )
                             </Text>
                            </View>
                            <TouchableOpacity
                                activeOpacity={0.8}
                                style={styles.dateselection_lr}
                                >
                                <Icon name="chevron-small-right" size={26} color="#EB6519" />
                            </TouchableOpacity>
                        </View>
                    </View>
                    <ScrollView showsVerticalScrollIndicator={false} style={styles.scrollviewbox}>
                        <View style={[styles.dateselection_box, styles.dateselection_xian]}>
                            <View style={[styles.dateselection_li, { alignItems: 'flex-start' }]}>
                                <Text style={styles.dateselection_li_tx}>
                                    一等座
                                </Text>
                            </View>
                            <View style={[styles.dateselection_li, { alignItems: 'center' }]}>
                                <Text style={styles.dateselection_li_tx}>
                                    ￥603.5
                                 </Text>
                            </View>
                            <View style={[styles.dateselection_li, { alignItems: 'center' }]}>
                                <Text style={styles.dateselection_li_tx}>
                                    55张
                                </Text>
                            </View>
                            <View style={[styles.dateselection_li, { alignItems: 'flex-end' }]}>
                                <TouchableOpacity
                                    activeOpacity={0.8}
                                    onPress={() => this._onPress('GtStart')}
                                    style={[styles.dateselection_buttom, { backgroundColor: '#FF6600' }]}>
                                    <Text style={[styles.dateselection_buttom_tx,]}>
                                        抢票
                                    </Text>
                                </TouchableOpacity>
                            </View>
                            <View style={[styles.dateselection_li, { alignItems: 'flex-end' }]}>
                                <TouchableOpacity
                                    activeOpacity={0.8}
                                    onPress={() => this._onPress('AdvanceBooking')}
                                    style={[styles.dateselection_buttom, { backgroundColor: '#F39800' }]}>
                                    <Text style={[styles.dateselection_buttom_tx,]}>
                                        预订
                                    </Text>
                                </TouchableOpacity>
                            </View>
                        </View>

                    </ScrollView>

                </View>
                <TouchableOpacity
                    activeOpacity={0.8}
                    onPress={this.onOpenEsoterica.bind(this)}
                    style={styles.Grabticket}>
                    <Image style={styles.Grabticket_img} source={require('../images/ic_fixedSeat_b.png')} />
                </TouchableOpacity>
                <Esoterica
                    showEsoterica={showEsoterica}
                    onShowEsoterica={this.onOpenEsoterica.bind(this)}
                    onHideEsoterica={this.onCloseEsoterica.bind(this)}
                    />
                <TrainTimetable
                    showTrainTimetable={showTrainTimetable}
                    onShowTrainTimetable={this.onOpenTrainTimetable.bind(this)}
                    onHideTrainTimetable={this.onCloseTrainTimetable.bind(this)}
                    />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: CommonStyles.colors.white,
    },
    top_img: {
        width: Constants.window.width, height: 120, justifyContent: 'center',
    },
    sitebox: {
        borderRadius: 5, borderColor: 'white', borderWidth: 1, width: 70, height: 27,
        justifyContent: 'center', alignItems: 'center'
    },
    sitebox_text: {
        color: 'white', fontSize: 18,
    },
    top_img_view: {
        marginLeft: 36, marginRight: 36, width: Constants.window.width - 72, flexDirection: 'row',
    },
    //中间
    top_img_view_li: {
        width: Constants.window.width - 72 - (70 * 2), justifyContent: 'center', alignItems: 'center'
    },
    top_img_view_li_xian: {
        width: Constants.window.width - 72 - (70 * 2) - 60, height: 1, backgroundColor: 'white'
    },
    top_img_view_p: {
        position: 'absolute', left: (Constants.window.width - 72 - (70 * 2) - 60 - 50) / 2 + 30, width: 50, alignItems: 'center'
    },
    top_img_view_p_tx: {
        color: 'white', fontSize: 14
    },
    //左,右边
    sitebox_lf_top: {
        position: 'absolute', width: 70, alignItems: 'center'
    },
    sitebox_lf_top_tx: {
        color: 'white', fontSize: 12
    },
    //中间层
    dateselection: {
        width: Constants.window.width, height: 44,
    },
    dateselection_box: {
        marginLeft: 15, marginRight: 15, width: Constants.window.width - 30, flexDirection: 'row', height: 44, justifyContent: 'center'
    },
    dateselection_xian: {
        borderBottomWidth: 1, borderBottomColor: '#EBEBEB'
    },
    dateselection_lr: {
        width: 30, justifyContent: 'center', height: 44, alignItems: 'center'
    },
    dateselection_ce: {
        width: (Constants.window.width - 30) - 60, justifyContent: 'center', flexDirection: 'row', alignItems: 'center'
    },
    dateselection_ce_img: {
        width: 17, height: 18
    },
    dateselection_ce_tx: {
        color: '#EB6519', fontSize: 14, paddingRight: 10, paddingLeft: 8
    },
    //车票信息列表
    dateselection_li_tx: {
        fontSize: 14, color: '#5F5F5F'
    },
    dateselection_li: {
        width: (Constants.window.width - 30) / 5, justifyContent: 'center'
    },
    dateselection_buttom: {
        borderRadius: 5, width: 50, alignItems: 'center'
    },
    dateselection_buttom_tx: {
        color: 'white', padding: 3, fontSize: 16
    },
    //抢票秘籍
    Grabticket: {
        width: Constants.window.width, height: 62, justifyContent: 'center', alignItems: 'center', position: 'absolute', bottom: 20, marginTop: 20
    },
    Grabticket_img: {
        width: 210, height: 62
    },
    //车次列表占用高度计算
    scrollviewbox: {
        maxHeight: Constants.window.height - Navigation_HEIGHT - 120 - 45 - 62 - 60
    }

});

export default FixedSeat;